<template>
    <div class="classAdmin">
        <el-card>
            <div slot="header">
                <span class="panel-title home-title">班级管理</span>
                <!-- 搜索框 -->
                <div class="filter-row">
                    <span>
                        <vxe-input v-model="keyword" :placeholder="$t('m.Enter_keyword')" type="search" size="medium"
                            @search-click="filterByKeyword" @keyup.enter.native="filterByKeyword">
                        </vxe-input>
                    </span>
                </div>
            </div>
            <vxe-table :loading="loading" ref="xTable" :data="tableData" auto-resize stripe align="center">
                <vxe-table-column field="class" :title="$t('m.Class')">

                </vxe-table-column>
                <vxe-table-column field="population" :title="$t('m.Papulation')">

                </vxe-table-column>
                <vxe-table-column field="profression" :title="$t('m.Profression')">

                </vxe-table-column>
                <vxe-table-column field="operate" :title="$t('m.Option')">
                    <vxe-button @click="showDetailEvent(row)">更多</vxe-button>
                </vxe-table-column>

            </vxe-table>
            <vxe-modal v-model="isModalShow" width="600">
                <template #title>
                    <span style="color:red">更多信息</span>
                </template>
                <template #corner>
                    <vxe-icon name="bell-fill"></vxe-icon>
                    <vxe-icon name="minus"></vxe-icon>
                </template>
                <template #default>
                    <vxe-table show-overflow auto-resize height="400" :data="tableDatas" stripe align="center">
                        <vxe-table-column field="name" :title="$t('m.Class')">

                        </vxe-table-column>
                        <vxe-table-column field="id" title="学号">

                        </vxe-table-column>
                        <vxe-table-column field="name" title="姓名">

                        </vxe-table-column>
                        <vxe-table-column field="age" title="完成题数">

                        </vxe-table-column>
                        <vxe-table-column field="operate" title="操作">
                            <vxe-button>移除</vxe-button>
                        </vxe-table-column>

                    </vxe-table>
                    <!-- 单独添加成员 -->
                    <el-form class="el-form" ref="form" :model='form' label-width="auto" :inline="true">
                        <el-form-item size="small" label="姓名:">
                            <el-input v-model="form.name" type="text" class="el-input"></el-input>
                        </el-form-item>
                        <el-form-item size="small" label="学号:">
                            <el-input v-model="form.id" class="el-input"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button class="button" type="primary" @click="onSubmitForm(form)">添加成员</el-button>
                        </el-form-item>
                        <el-form-item >
                            <el-upload action="" :show-file-list="false" accept=".csv" class="el-upload" style="overflow: hidden;">
                                <el-button class="button" type="success" >批量添加</el-button>
                            </el-upload>
                        </el-form-item>

                    </el-form>
                    <!-- 批量添加按钮 -->

                </template>

            </vxe-modal>

        </el-card>
    </div>
</template>
<script>
export default {
    name: 'ClassAdmin',
    data() {
        return {
            tableData: [
                { class: 201, population: '20', profression: '智能科学与技术', },
                { class: 10002, population: 'Test2', profression: 'Test', operate: 'Women' },
                { class: 10003, population: 'Test3', profression: 'PM', operate: 'Man' },
                { class: 10004, population: 'Test4', profression: 'Designer', operate: 'Women' },
                { class: 201, population: '20', profression: '智能科学与技术', operate: 'Man' },
                { class: 201, population: '20', profression: '智能科学与技术', operate: 'Man' },
                { class: 201, population: '20', profression: '智能科学与技术', operate: 'Man' },
                { class: 201, population: '20', profression: '智能科学与技术', operate: 'Man' },
                { class: 201, population: '20', profression: '智能科学与技术', operate: 'Man' },
                { class: 201, population: '20', profression: '智能科学与技术', operate: 'Man' },
                { class: 201, population: '20', profression: '智能科学与技术', operate: 'Man' },
                { class: 201, population: '20', profression: '智能科学与技术', operate: 'Man' },
                { class: 201, population: '20', profression: '智能科学与技术', operate: 'Man' },
                { class: 201, population: '20', profression: '智能科学与技术', operate: 'Man' },
                { class: 201, population: '20', profression: '智能科学与技术', operate: 'Man' },
                { class: 201, population: '20', profression: '智能科学与技术', operate: 'Man' },
            ],
            isModalShow: false,
            tableDatas: [
                { id: 10001, name: 'Test1', role: 'Develop', sex: '0', age: 28, address: 'test abc' },
                { id: 10002, name: 'Test2', role: 'Test', sex: '1', age: 22, address: 'Guangzhou' },
                { id: 10003, name: 'Test3', role: 'PM', sex: '0', age: 32, address: 'Shanghai' },
                { id: 10004, name: 'Test4', role: 'Designer', sex: '1', age: 23, address: 'test abc' },
                { id: 10005, name: 'Test5', role: 'Develop', sex: '1', age: 30, address: 'Shanghai' },
                { id: 10006, name: 'Test6', role: 'Designer', sex: '1', age: 21, address: 'test abc' },
                { id: 10001, name: 'Test1', role: 'Develop', sex: '0', age: 28, address: 'test abc' },
                { id: 10002, name: 'Test2', role: 'Test', sex: '1', age: 22, address: 'Guangzhou' },
                { id: 10003, name: 'Test3', role: 'PM', sex: '0', age: 32, address: 'Shanghai' },
                { id: 10004, name: 'Test4', role: 'Designer', sex: '1', age: 23, address: 'test abc' },
                { id: 10005, name: 'Test5', role: 'Develop', sex: '1', age: 30, address: 'Shanghai' },
                { id: 10006, name: 'Test6', role: 'Designer', sex: '1', age: 21, address: 'test abc' },
            ],
            form: {
                name: '',
                id: '',
            }
        };
    },
    methods: {
        filterByKeyword() {
            console.log("111");
        },
        showDetailEvent() {
            console.log("点击弹框");
            this.isModalShow = true
        },
        onSubmitForm(form) {
            console.log('提交' + this.form.name);
        }
    }
}
</script>
<style  scoped>
.filter-row {
    margin-top: 10px;
}

.el-form {
    margin-top: 30px;
}

.el-input {
    border: 1px solid #409eff;
    width: 140px;
    border-radius: 5px;
    /* height: 28px; */

}

.button {
    height: 32px;
    width: 70px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.el-upload{
    height: 40px;
    margin-top: -4px;
}
</style>